<template>
  <div class="t-navBarRight" v-if="realList.length > 0">
    <van-popover v-if="realList.length>1" v-model:show="showPopover" :actions="realList" @select="handleClick">
      <template #reference>
        <van-icon name="ellipsis" size="18"/>
      </template>
    </van-popover>
    <div v-else @click="handleClick(realList[0])">
      <van-icon :name="realList[0].icon" size="18"/>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent ,watch,reactive,ref,computed,nextTick} from 'vue'
import { useStore } from "vuex"
export default defineComponent({
  name:'tNavBarRight',
  emits:['checked'],
  props:{
    permissions:{
      type: Array,
      default:[]
    },
    keyDict:{
      type:Object,
      default:{}
    }
  },
  setup (props,{emit}) {
    const store = useStore();
    const list = [
      { text: '搜索', icon: 'search', key: 'search'},
      { text: '历史', icon: 'records', key: 'records'},
      { text: '添加', icon: 'plus', key: 'barAdd'},
      { text: '编辑', icon: 'edit', key: 'edit'},
    ];
    const showPopover = ref(false)
    const realList = reactive<Array<any>>([]);
    const metaState = computed(()=>store.getters.metaState);
    const handleClick = function(item){
      if(realList.length > 1){
        showPopover.value = false;
      }
      emit('checked',item)
    }
    const update = function(nowData){
      realList.splice(0)
      list.forEach(item=>{
        if(nowData.indexOf(item.key) != -1){
          if(props.keyDict[item.key]){
            item.text = props.keyDict[item.key];
          }
          realList.push(item)
        }
      })
    }
    watch(()=>props.permissions,(nowData)=>{
      showPopover.value = false;
      update(nowData)
    })
    watch(()=>metaState.value,(nowData)=>{
      nextTick(()=>{
        const meta =  store.getters.meta;
        update(meta.permissions || [])
      })
    })
    nextTick(()=>{
      update(props.permissions)
    })
    return {
      realList,
      showPopover,
      handleClick
    }
  }
})
</script>

<style lang="scss">
.t-navBarRight{
 
}
</style>